<template>
  <div>
    <button @click="fn">按钮</button>
    <p>{{ list }}</p>
    <p>{{ obj }}</p>
  </div>
</template>

<script>
// 只要在项目中修改数据，发现视图不是响应式，可以看一下是不是操作属于这三种其中一种，然后就可以尝试一下用$set或$forceUpdate

// 1. 什么时候数据不是响应式 如何解决
// 在vue中有几个数据操作不是响应式的（数据变了不会导致视图更新）
// 1. 数组操作索引
// 2. 对象添加属性
// 3. 删除对象中某个属性
// vue为了解决这个问题，就为我们准备了几个api
// $set(操作数组索引或给对象添加属性) $delete(删除对象的属性) $forceUpdate(通用的方法，任何时候都有效果)
export default {
  data() {
    return {
      list: ["pink", "red", "green"],
      obj: { name: "zs", gender: "男" },
    };
  },
  methods: {
    fn() {
      this.list[1] = "orange";
      //强制更新
      this.$forceUpdate();
      // this.$set(this.list, 1, "orange");
      // this.obj.age = 30;
      // this.$set(this.obj, "age", 30);
      // delete this.obj.gender; //删除对象的属性
      // this.$delete(this.obj, "gender");
    },
  },
};
</script>

<style scoped></style>
